import React, { Component } from "react";
import { inject, observer } from 'mobx-react'

@inject('todo')
@observer
class TodoList extends Component {
  render() {
	const { filterTodo, todoDelete, changeCompleted } = this.props.todo
    return (
      <section className="main">
		<input className="toggle-all" type="checkbox" />
		<ul className="todo-list">
		{
			filterTodo.map((todo, index) => (
				<li className={ todo.isCompleted ? 'completed' : '' } key={ todo.taskName }>
					<div className="view">
						{/* isCompleted 表示任务是否已完成 */}
						<input 
							onChange={e => changeCompleted(index, e.target.checked)}
							checked={ todo.isCompleted } 
							className="toggle" 
							type="checkbox" />
						<label>{ todo.taskName }</label>
						<button 
							className="destroy" 
							// 根据索引删除对应的任务
							onClick={() => todoDelete(index)}></button>
					</div>
					<input className="edit" />
				</li>
			))
		}
		</ul>
	  </section>
    );
  }
}

export default TodoList;
